import React from 'react'

// 由于这是一个Web项目，我们需要创建一个适配器来模拟React Native环境
const ReactNativeWrapper = ({ onNavigate }) => {
  // 模拟React Native的样式系统
  const webStyles = {
    container: {
      backgroundColor: '#f8f9fa',
      padding: '16px',
      margin: '8px 0',
      borderRadius: '12px',
      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
    },
    title: {
      fontSize: '18px',
      fontWeight: 'bold',
      color: '#333',
      marginBottom: '16px',
      textAlign: 'center',
    },
    scrollContainer: {
      marginBottom: '16px',
      overflowX: 'auto',
      whiteSpace: 'nowrap',
      display: 'flex',
      gap: '12px',
    },
    card: {
      backgroundColor: '#fff',
      padding: '16px',
      borderRadius: '8px',
      minWidth: '100px',
      display: 'inline-flex',
      flexDirection: 'column',
      alignItems: 'center',
      boxShadow: '0 2px 3.84px rgba(0, 0, 0, 0.1)',
      cursor: 'pointer',
      transition: 'transform 0.2s ease',
    },
    cardIcon: {
      fontSize: '24px',
      marginBottom: '8px',
    },
    cardTitle: {
      fontSize: '14px',
      fontWeight: '600',
      color: '#333',
      marginBottom: '4px',
    },
    cardSubtitle: {
      fontSize: '12px',
      color: '#666',
    },
    infoSection: {
      backgroundColor: '#fff',
      padding: '16px',
      borderRadius: '8px',
    },
    infoTitle: {
      fontSize: '16px',
      fontWeight: '600',
      color: '#333',
      marginBottom: '12px',
    },
    infoItem: {
      display: 'flex',
      alignItems: 'center',
      marginBottom: '8px',
    },
    infoIcon: {
      fontSize: '16px',
      marginRight: '8px',
    },
    infoText: {
      fontSize: '14px',
      color: '#666',
      flex: 1,
    },
  }

  const handleCardClick = (action) => {
    console.log('React Native card clicked:', action)
    if (onNavigate) {
      onNavigate(action)
    }
  }

  return (
    <div style={webStyles.container}>
      <div style={webStyles.title}>React Native 组件区域</div>
      
      <div style={webStyles.scrollContainer}>
        <div 
          style={webStyles.card}
          onClick={() => handleCardClick('emergency')}
          onMouseEnter={(e) => e.target.style.transform = 'scale(1.05)'}
          onMouseLeave={(e) => e.target.style.transform = 'scale(1)'}
        >
          <div style={webStyles.cardIcon}>🚨</div>
          <div style={webStyles.cardTitle}>急诊服务</div>
          <div style={webStyles.cardSubtitle}>24小时急诊</div>
        </div>

        <div 
          style={webStyles.card}
          onClick={() => handleCardClick('appointment')}
          onMouseEnter={(e) => e.target.style.transform = 'scale(1.05)'}
          onMouseLeave={(e) => e.target.style.transform = 'scale(1)'}
        >
          <div style={webStyles.cardIcon}>📋</div>
          <div style={webStyles.cardTitle}>预约管理</div>
          <div style={webStyles.cardSubtitle}>查看预约</div>
        </div>

        <div 
          style={webStyles.card}
          onClick={() => handleCardClick('reports')}
          onMouseEnter={(e) => e.target.style.transform = 'scale(1.05)'}
          onMouseLeave={(e) => e.target.style.transform = 'scale(1)'}
        >
          <div style={webStyles.cardIcon}>📊</div>
          <div style={webStyles.cardTitle}>检查报告</div>
          <div style={webStyles.cardSubtitle}>查看报告</div>
        </div>

        <div 
          style={webStyles.card}
          onClick={() => handleCardClick('medication')}
          onMouseEnter={(e) => e.target.style.transform = 'scale(1.05)'}
          onMouseLeave={(e) => e.target.style.transform = 'scale(1)'}
        >
          <div style={webStyles.cardIcon}>💊</div>
          <div style={webStyles.cardTitle}>用药提醒</div>
          <div style={webStyles.cardSubtitle}>定时提醒</div>
        </div>
      </div>

      <div style={webStyles.infoSection}>
        <div style={webStyles.infoTitle}>今日健康提醒</div>
        <div style={webStyles.infoItem}>
          <div style={webStyles.infoIcon}>💧</div>
          <div style={webStyles.infoText}>记得多喝水，保持身体水分</div>
        </div>
        <div style={webStyles.infoItem}>
          <div style={webStyles.infoIcon}>🏃</div>
          <div style={webStyles.infoText}>建议进行30分钟轻度运动</div>
        </div>
      </div>
    </div>
  )
}

export default ReactNativeWrapper
